<template>
  <div class="container">
    <div class="waterfall-container">
      <div>
        <div  v-if="blog.contentType ==='1'" class="typo m-padded-lr-responsive m-padded-tb-large ql-editor" v-html="blog.content"></div>
        <div  v-if="blog.contentType ==='3'" v-html="blog.content"></div>
        <CherryMarkdown ref="CherryMarkdown" v-if="blog.contentType ==='2'" v-model='blog.contentMarkdown' :defaultModel="'previewOnly'"></CherryMarkdown>
      </div>
      <template v-if="blog.blogFilesNew">
        <div v-for="item in blog.blogFilesNew">
          <el-image style="width: 100%; margin-top: 20px;" lazy :src="item"></el-image>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import {addBlogViews, cmsListBlog, getBlogDetail} from "@/api/cms/blog";
import {
  Loading
} from 'element-ui';

export default {
  name: "index",
  data() {
    return {
      blog: {}
    }
  },
  created() {
    this.getBlogInfomation()
  },
  computed: {
    envUrl() {
      return process.env.VUE_APP_BASE_API
    }
  },
  methods: {
    // 获取博客详情信息
    async getBlogInfomation() {
      getBlogDetail(this.$route.query.id).then(response => {
        const {data: res} = response;
        this.blog = response.data
        let blogFilesNew = []
        if (response.data.blogFiles !== null) {
           JSON.parse(response.data.blogFiles).forEach(item => {
            blogFilesNew.push(this.envUrl + item.filePath)
          })
          this.blog.blogFilesNew = blogFilesNew
        }
      });
    },
  }
}
</script>

<style scoped lang="scss">
.container {
  display: flex;
  justify-content: center;
  .waterfall-container {
    margin-bottom: 7.5em;
    margin-top: 7.5em;
    padding: 0 9em;
    max-width: 1140px;
    box-sizing: border-box;
    height: auto;
  }
}
</style>
